import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
    WhiteSpace,
    WingBlank,
    Flex,
    Icon,
    ListView,
    Button,
    Modal
} from 'antd-mobile';
import Moment from 'moment';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import dianpusvg from "../../assets/img/dianpu.svg";
import rightsvg from "../../assets/img/right.svg";
import lightning from "../../assets/svg/lightning.svg";
import {Toast} from "antd-mobile/lib/index";
import './secKillItem.less';
class SecKillClassItem extends Component {
    constructor(props) {
        super(props);
        this.timer = null;
        const {v} = this.props;
        this.state = {
            d:"",
            showHour:"",
            m:"",
            s:"",
            now:this.props.nowTime
        }
    }
    componentDidMount(){
        // setInterval(this.countTime, 1000, 1000)
        // this.countTime()
    }
    // countTime=()=>{
    //     //获取当前时间
    //     const {v} = this.props;
    //     // var date = new Date();
    //     // var now = date.getTime();
    //     var now = this.state.now;
    //     //设置截止时间
    //     var end = v.endTime;
    //     var start = v.startTime;
    //     let seconds = parseInt((end - now) / 1000);
    //     // 总的小时数
    //     let h = Math.floor(seconds / 60 / 60);
    //     // 天数
    //     let d = parseInt(h / 24);
    //     // 显示的小时数
    //     let showHour = Math.floor(h - d * 24);
    //     let m = Math.floor((seconds - h * 60 * 60) / 60);
    //     let s = Math.floor((seconds - h * 60 * 60 - m * 60));
    //     if (seconds < 0) {
    //         h = 0;
    //         m = 0;
    //         s = 0;
    //         d = 0;
    //         showHour = 0;
    //     }
    //     this.setState({
    //         d:d,
    //         showHour:showHour,
    //         m:m,
    //         s:s,
    //         now:now+1000
    //     })
    // }
    render() {
        const {v} = this.props;
        const {d,showHour,m,s}=this.state;
        let timeBuyStatus="";
        let mashangButton=false;
        let qiangguangButton=false;
        if(v.activityInventory>0){
            timeBuyStatus = '秒杀';
            mashangButton=true;
        }else{
            timeBuyStatus = '已抢光';
            qiangguangButton=true;
        }
        return <div>
            {this.props.showTime?<Flex justify="center" style={{backgroundColor:"#F7F7F7",padding:".3rem 0",fontSize:".25rem"}}>
                <Icon type={lightning.id} style={{marginRight:".2rem"}}></Icon>
                <span>{v.isSoldOut == 1?"仅剩":"剩余"}</span>
                {(v.activityInventory+"").split("").map((a,c)=>{
                    return <span className="timeBuy_time" key={c}>{a}</span>
                })}
                <span style={{color:"#F4B712"}}>件</span>
            </Flex>:""}
            
                <WingBlank  style={{paddingBottom:".3rem",paddingTop:".3rem",borderBottom:"1px solid #e5e5e5"}}>
                    <Flex>
                        <div style={{width:"2rem",height:"2rem",marginRight:".2rem",padding:".2rem"}} onClick={()=>{
                            this.props.dispatch(routerRedux.push({
                                pathname: `/goodsDetail/${v.specId}`,
                            }));
                        }}>
                            <NoLazyImg src={v.goodsPicture} style={{width:"2rem",height:"2rem",marginRight:".2rem",padding:".2rem"}} />
                        </div>

                        <div style={{width:"100%"}}>
                            <div style={{fontSize:".3rem",lineHeight:".45rem",marginBottom:".2rem"}} className="timeBuyTitle" onClick={()=>{
                                this.props.dispatch(routerRedux.push({
                                    pathname: `/goodsDetail/${v.specId}`,
                                }));
                            }}>{v.goodsName}</div>
                            {v.activityList[0]? <Flex style={{marginBottom:".1rem"}}>
                                {v.activityList.map((a,b)=>{
                                    return <div key={b} style={{color:"#F8BE59",border:"1px solid #F8BE59",padding:".1rem",marginRight:".2rem"}}>
                                        {a.name}
                                    </div>
                                })}
                            </Flex>:""}
                            <Flex style={{marginBottom:".4rem"}} onClick={()=>{
                                this.props.dispatch(routerRedux.push({
                                    pathname: `/goodsDetail/${v.specId}`,
                                }));
                            }} >
                                    {v.isSelf==1?<div style={{border:"1px solid #F17878",color:"#F17878",padding:".05rem",borderRadius:".1rem",marginRight:".2rem"}}>自营</div>:""}
                                    {v.activityInventory==0?<Flex style={{color:"#F4B712"}}>
                                        { Moment(this.props.nowTime-v.startTime).format(' h小时mm分') }抢光{v.activityInventory +v.selledNum>10000?(v.activityInventory +v.selledNum)/10000+"件":(v.activityInventory +v.selledNum)+"件"}
                                    </Flex>: ""}

                            </Flex>
                            <Flex justify="end">
                                {mashangButton&&<Button type='ghost' size='small' inline style={{backgroundColor:"#ff0036",color:"#fff",borderRadius:".5rem"}} onClick={()=>{
                                    this.props.dispatch(routerRedux.push({
                                        pathname: `/goodsDetail/${v.specId}`,
                                    }));
                                }}>{timeBuyStatus}</Button>}
                                {qiangguangButton&&<Button  size='small' inline style={{backgroundColor:"#e5e5e5",color:"#fff",borderRadius:".5rem"}}>{timeBuyStatus}</Button>}
                            </Flex>
                            <Flex >
                                {v.activityInventory==0?<div style={{color:"#e5e5e5",display:"flex", alignItems:"flex-end"}} onClick={()=>{
                                    this.props.dispatch(routerRedux.push({
                                        pathname: `/goodsDetail/${v.specId}`,
                                    }));
                                }}><span style={{background:"#F4B712",color:"#fff",display:"inline-block",padding:".05rem",marginRight:".2rem"}}>秒杀价</span>
                                    <div><span>¥</span><span style={{fontSize:".4rem"}}>{v.activityPrice }</span></div>
                                    <span style={{color:"#999",textDecoration:"line-through",marginLeft:".2rem"}}>¥{v.goodsPrice }</span>
                                </div>: <div style={{color:"#ff0036",display:"flex", alignItems:"flex-end"}} onClick={()=>{
                                    this.props.dispatch(routerRedux.push({
                                        pathname: `/goodsDetail/${v.specId}`,
                                    }));
                                }}><span style={{background:"#F4B712",color:"#fff",display:"inline-block",padding:".05rem",marginRight:".2rem"}}>秒杀价</span>
                                    <div><span>¥</span><span style={{fontSize:".4rem"}}>{v.activityPrice }</span></div>
                                    <span style={{color:"#999",textDecoration:"line-through",marginLeft:".2rem"}}>¥{v.goodsPrice }</span>
                                </div>}

                            </Flex>
                        </div>
                    </Flex>
                </WingBlank>
        </div>
    }
}

export default connect(({ secKill }) => ({ secKill }))(SecKillClassItem);
